<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../common/taglibs.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="StyleSheet" type="text/css" href="<%=request.getContextPath()%>/pages/css/common.css"></link>
<link rel="StyleSheet" type="text/css" href="<%=request.getContextPath()%>/pages/css/password.css"></link>
<script type="text/javascript" src="<%=request.getContextPath()%>/pages/js/password.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/pages/js/jquery-1.5.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/pages/js/jquery.validate.min.js" ></script>
<script type="text/javascript">
	$().ready(function(){
		$("#regUserForm").validate({
				rules: {
					fName : {
						required: true,
						minlength: 2
					},
					email : {
						required: true,
						email: true
					},
					teleNo : {
						number: true,
						minlength: 9
					},
					mobileNo : {
						number: true,
						minlength: 9
					},
					code : {
						required: true,
						number: true,
						minlength: 4,
						maxlength: 4
					},
					username : {
						required: true,
						minlength: 3					
					}
				},
				messages: {
					fName : {
						required: "Please enter your firstname",
						minlength: "Your first name must consist of at least 2 characters"
					},
					username : {
						required: "Please enter your username",
						minlength: "Your username must consist of at least 3 characters"
					}
				}
		});
	});
	
	function lookup(inputString) {
		if(inputString.length <5) {
			$('#suggestions').show();
			$('#autoSuggestionsList').hide();
		} else {
			$('#suggestions').hide();
			$.post("checkUsername.jsp",{user: ""+inputString+""},function(data){
			$('#autoSuggestionsList').html(data).show();
			});
		}
	}
	
</script>
<title>DFASS</title>
</head>
<body>
	<div class="header">
		<%@ include file="../inc/login_top.jsp" %>			
		</div>
		
	<div class="bodyContent" align="center">
		<table><tr><td>&nbsp;</td></tr></table>
		<!-- This Empty Table is Required before the content of the body -->
		<s:form theme="simple" id="regUserForm" name="regUserForm" action="csaveUser?uType='c'" >		
			<table class="tblAdminNormal">
				<thead>
					<tr>
						
						<td colspan="2">Customer Registration</td>
					</tr>
				</thead>
				<tbody>
				    <tr>
				        <td>First Name</td>
				        <td><s:textfield name="fName" cssStyle="width:150px" /></td>
				    </tr>
				    <tr>
				        <td>Last Name</td>
				        <td><s:textfield name="lName" cssStyle="width:150px" /></td>
				    </tr>
				    <tr>
				        <td valign="top">Address</td>
				        <td><s:textarea name="address" cssStyle="resize:none;width:150px; height:50px;" /></td>
				    </tr>
				    <tr>
				        <td>Contact No</td>
				        <td><s:textfield name="teleNo" cssStyle="width:150px" /></td>
				    </tr>
				    <tr>
				        <td>Mobile No</td>
				        <td><s:textfield name="mobileNo" cssStyle="width:150px" /></td>
				    </tr>
				    <tr>
				        <td>E-mail</td>
				        <td><s:textfield name="email" cssStyle="width:150px" /></td>
				    </tr>
				    <tr>
				        <td>Username</td>
				        <td>
		                   	<s:textfield name="username" cssStyle="width:150px" onkeyup="lookup(this.value);" />
		                  	<div id="suggestions" style="display: none;">Value must be greater than 4 characters</div>
							<div style="display: none;" id="autoSuggestionsList" ></div>
							<div style="display: none;" id="error">No Special Characters.Only number and alphabets</div>
						</td>
				    </tr>
				    <tr>
				        <td>Password</td>
				        <td>
				        	<s:password name="password" style="width:150px;" onkeyup="passwordStrength(this.value)" />
				        	<div id="passwordDescription">Password not entered</div>
							<div id="passwordStrength" class="strength0" style="width:160px;"></div>
				        </td>
				    </tr>
				    <tr>
				        <td>Password confirmation</td>
				        <td><s:password name="cPassword" style="width:150px;" /></td>
				    </tr>
				    <tr>
				        <td>Password recovery code</td>
				        <td><s:textfield name="code" style="width:150px;" /></td>
				    </tr>
				    <tr>
				        <td></td> 
				        <td><s:submit value="Add User" cssClass="button" /></td> 
				    </tr>
				    <tr>
				        <td><s:actionmessage cssClass="successMsg" /></td> 
				        <td><s:fielderror cssClass="errorMsg" /></td> 
				    </tr>
				</tbody>
			</table>		
		</s:form>
	</div>				
	
	<div class="footerContent" align="center">
		<div class="footer">
			<%@ include file="/pages/inc/footer.jsp" %>
		</div>
	</div>
</body>
</html>